<template>
  <div>
    <a-table  v-if="tableData.columns.length > 0 || tableData.data.length > 0" :columns="tableData.columns" :data-source="tableData.data"
              :row-selection="{selectedRowKeys: tableData.selectedRowKeys, onChange: onSelectChange}"
              :scroll="{ x: 500}"
              :pagination="pagination"
              @change="handleTableChange"
              @resizeColumn="handleResizeColumn"
              :row-key="(record) => record.id"
              :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'tags'">
          <div class="table-btn-box">
            <span class="table-btn btn-1" @click="goInfo(text)">查看</span>
            <span class="table-btn btn-2" v-if="text.executeStatus === 1" @click="changeStatus(text.id, 2)">
              下发
            </span>
            <span class="table-btn btn-3" @click="changeStatus(text.id, 4)">终止</span>
          </div>
        </template>
        <template v-if="column.key === 'tradeBody'">
                  <span v-for="item in tradeareas" :key="item.label">
                        <span v-if="item.value === text">{{item.label}}</span>
                    </span>
        </template>
        <template v-if="column.key === 'sellerTradeBody'">
                  <span v-for="item in tradeareas" :key="item.label">
                        <span v-if="item.value === text">{{item.label}}</span>
                    </span>
        </template>
        <template v-if="column.key === 'tradeType'">
         <span v-for="item in areas" :key="item.label">
            <span v-if="item.value === text">{{item.label}}</span>
          </span>
        </template>
        <template v-if="column.key === 'sellerTradeType'">
         <span v-for="item in areas" :key="item.label">
            <span v-if="item.value === text">{{item.label}}</span>
          </span>
        </template>
      </template>
    </a-table>
    <a-skeleton v-else active />
  </div>
</template>
<script setup>
import {ref, reactive, watch, onMounted, getCurrentInstance, defineProps, defineEmits} from 'vue';
const { proxy  } = getCurrentInstance()
const emit = defineEmits(['exportData', 'changeStatus'])
import { useRouter } from "vue-router";
import {message} from "ant-design-vue";
const router = useRouter()
const props = defineProps({
  customData: {
    type: Array,
    required: true,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: []
  },
  customUpdate: {
    type: String,
    default: () => ''
  },
  changeValObj: {
    type: Object,
    default: () => {}
  },
  isSearch: {
    type: Boolean,
    default: () => false
  }
})
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
  {
    label: '国贸&新贸',
    value: 3
  },
])
// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: 1
  },
  {
    label: '中期',
    value: 2
  },
  {
    label: '现货',
    value: 3
  }
])
const pagination = ref({
  pageSize: 10,
  current: 1,
  total: 0,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: total => `共 ${total} 条`,
  size: 'small'
})
const handleTableChange = (paginationpage) => {
  pagination.value.pageSize = paginationpage.pageSize
  pagination.value.current = paginationpage.current
  pagination.value.total = paginationpage.total
  console.log('分页了', paginationpage)
  getUserColumPage()
}
watch(() => props.customData,(newVal) => {
  console.log('收到数页面刷新了', newVal)
  if (newVal) {
    getUserColum()
  }
})
watch(() => props.customUpdate,(newVal) => {
  console.log('收到数据没', newVal)
  if (newVal) {
    getUserColum()
  }
})
watch(() => props.changeValObj, (newVal) => {
  Object.assign(props.changeValObj, newVal)
}, {
  deep: true
})
const isSearchs = ref(false)
watch(() => props.isSearch, (newVal) => {
  console.log('搜索了没', newVal)
  isSearchs.value = newVal
  if (isSearchs.value) {
    getUserColumPage()
  } else {
    isSearchs.value = false
  }
})
const goInfo = (text)=> {
  router.push({
    path: '/arrangementDetails',
    query: {
      planId: text.planId,
      id: text.id
    }
  })
}
const tableData = reactive({
  columns: [],
  data: [],
  customData: props.customData,
  selectedRowKeys: []
})
const onSelectChange = (selectedRowKeys, selectedRows) => {
  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  tableData.selectedRowKeys = selectedRowKeys
  emit('exportData', selectedRows)
};
const getUserColum = () => {
  /**
   * 用户自定义列
   * */
  proxy.$api.getTableColumn({module: 'sp_arrange_scheme_detail'}).then(res => {
    console.log('成功了没', res)
    let resData = res.resultObject
    let newData = []
    // let firstObj =  {
    //   title: '序号',
    //   dataIndex: 'orderNum',
    //   key: 'orderNum',
    //   width: '80px',
    //   fixed: 'left',
    //   align: 'center'
    // }
    let lastObj =  {
      title: '操作',
      key: 'tags',
      fixed: 'right',
      align: 'left',
      resizable: true,
      width:180
    }
    if (props.customData.length > 0) {
      resData.map((item) => {
        props.customData.map(cItem => {
          if (item.columnKey === cItem.key) {
            let obj =  {
              title: '',
              dataIndex: '',
              key: '',
              ellipsis: true,
              resizable: true,
              align: 'left',
              width: 150
            }
            Object.assign(obj, {
              title: cItem.name,
              dataIndex: item.columnKey,
              key: item.columnKey,
              fixed: item.fixed ===1 ? 'left' : '',
            })
            newData.push(obj)
          }
        })
      })
      tableData.columns.push(lastObj)
      tableData.columns = [...newData, lastObj]
      const hash = {}
      tableData.columns = tableData.columns.reduce((item,next) => {
        hash[next.dataIndex]? '' : hash[next.dataIndex] = true && item.push(next)
        return item
      }, [])
    }
    getUserColumPage()
  })
}
/**
 * 表格数据
 * */
const getUserColumPage = () => {
  let newObj = {
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize
  }
  let Obj = Object.assign(newObj,props.changeValObj)
  /**
   * 表格数据
   * */
  proxy.$api.getShipArrangePage(Obj).then(res => {
    console.log('表格数据', res, proxy)
    tableData.data = res.resultObject.list
    tableData.data.map(item => {
      Object.assign(item, {
        id: item.id.toString()
      })
    })
    pagination.value.total = res.resultObject.total
  })
}
const getColumCustom = () => {
  return tableData.columns
}
const handleResizeColumn = (w, col) => {
  col.width = w
}
/**
 * 修改方案状态
 * */
const statusCount = ref(0)
const changeStatus = (id, status) => {
  proxy.$api.getShipArrangeStatus({executeStatus: status, schemeDetailId: id, remark: ''}).then(res => {
    console.log('修改状态成功', res)
    message.success('修改状态成功')
    getUserColumPage()
   emit('changeStatus', statusCount.value++)
  })
}
onMounted(() => {
  console.log('页面刷新')
  getUserColum()
})
const getSelect = ()  => {
  return tableData.selectedRowKeys = []
}
// eslint-disable-next-line no-undef
defineExpose({
  getColumCustom,
  getUserColum,
  getSelect
})
</script>

<style lang="scss" scoped>
.table-btn-box {
  display: flex;
  text-align: center;
  .btn-1 {
    color: #0062AD;
    padding-left: 10px;
  }
  .btn-2 {
    color: #6B7A8B;
    border-right: 1px solid #DCDEE0;
    border-left: 1px solid #DCDEE0;
    padding-left: 10px;
  }
  .btn-3 {
    color: #F5001D;
    padding-left: 10px;
    border-left: 1px solid #DCDEE0;
  }
  .btn-4 {
    border-left: 1px solid #DCDEE0;
    color: #6A73FF;
    padding-left: 10px;
  }
  .table-img {
    color: #6B7A8B;
    border-left: 1px solid #DCDEE0;
    img {
      width: 20px;
      height: 21px;
      margin: 0 10px;
    }
  }
}
.type-noexecution {
  color: #FA6400;
}
.type-yesexecution {
  color: #0062AD;
}
.type-executed {
  color: #27AF91;
}
.type-circle {
  font-weight: 800;
  padding-right: 5px;
}
.table-search {
  width: 100%;
  padding: 15px;
  border-bottom: 1px solid #DCDEE0;
  background: #ffffff;
  margin-top: 10px;
  height: 95px;
  display: flex;
  justify-content: space-between;
  .search-left {
    display: flex;
    margin-top: 15px;
    .search-item {
      margin-left: 20px;
      border: 1px solid  #DCDEE0;
      height: 34px;
      line-height: 32px;
      span {
        padding:0 12px;
        color: #2C3749;
      }
    }
    .search-btn {
      margin-left: 50px;
      display: flex;
      .search-btn1 {
        background: #f5001d;
        border-radius: 2px;
        color: #fff;
        padding: 0 20px;
      }
    }
  }
  .search-right {
    display: flex;
    margin-top: 15px;
    .search-input {
      text-align: left;
    }
  }

}
.table-box {
  background: #ffffff;
  padding: 20px;
  margin-bottom: 10px;
}
.table-flex-btn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
